<html>

<head>
    <meta charset="utf-8" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            overflow: hidden;
        }

        .gamecanvas {
            width: 1080px;
            margin:0px auto;
        }
    </style>
</head>

<body>
    <div class="gamecanvas" >
      <canvas  id='game' width='1065px' height = '800px' ></canvas>
      <audio id="bgm" src="assets/testbgm.mp3"  loop="loop" ></audio>

    </div>

   
    <script>
        function loadText(url) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.onload = () => {
                    resolve(xhr.responseText);
                }
                xhr.open('get', url);
                xhr.send();
            })
        }

        function loadScript(url) {
            return new Promise((resolve, reject) => {
                const script = document.createElement("script");
                script.onload = () => resolve();
                script.src = url;
                document.body.appendChild(script)

            })
        }
        async function run() {
            const content = await loadText('config.json');
            window['configData'] = JSON.parse(content)
            const javascriptFiles = window['configData'].scripts;

            for (let item of javascriptFiles) {
                await loadScript(item);
            }
        }
        run();
    </script>
</body>

</html>